// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`SearchListControl should render a search box and list of hierarchical options 1`] = `
Object {
  "asFragment": [Function],
  "baseElement": <body>
    <p
      class="a11y-speak-intro-text"
      hidden="hidden"
      id="a11y-speak-intro-text"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    >
      Notifications
    </p>
    <div
      aria-atomic="true"
      aria-live="assertive"
      aria-relevant="additions text"
      class="a11y-speak-region"
      id="a11y-speak-assertive"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    />
    <div
      aria-atomic="true"
      aria-live="polite"
      aria-relevant="additions text"
      class="a11y-speak-region"
      id="a11y-speak-polite"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    />
    <div>
      <div
        class="woocommerce-search-list is-compact"
      >
        <div
          class="woocommerce-search-list__selected"
        >
          <div
            class="woocommerce-search-list__selected-header"
          >
            <strong>
              0 items selected
            </strong>
          </div>
        </div>
        <div
          class="woocommerce-search-list__search"
        >
          <div
            class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
          >
            <div
              class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
            >
              <label
                class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
                for="inspector-text-control-11"
              >
                Search for items
              </label>
              <input
                class="components-text-control__input"
                id="inspector-text-control-11"
                type="search"
                value=""
              />
            </div>
          </div>
        </div>
        <ul
          class="woocommerce-search-list__list"
        >
          <li>
            <div
              class="woocommerce-search-list__item depth-0 has-children"
              role="treeitem"
              tabindex="0"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="inspector-checkbox-control-54"
                      type="checkbox"
                      value="1"
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-54"
                  >
                    Apricots
                  </label>
                </div>
              </div>
            </div>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-11-5"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-11-5"
                      name="search-list-item-11"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-55"
                  >
                    Lychee
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-11-6"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-11-6"
                      name="search-list-item-11"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-56"
                  >
                    Mulberry
                  </label>
                </div>
              </div>
            </label>
          </li>
        </ul>
      </div>
    </div>
  </body>,
  "container": <div>
    <div
      class="woocommerce-search-list is-compact"
    >
      <div
        class="woocommerce-search-list__selected"
      >
        <div
          class="woocommerce-search-list__selected-header"
        >
          <strong>
            0 items selected
          </strong>
        </div>
      </div>
      <div
        class="woocommerce-search-list__search"
      >
        <div
          class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
        >
          <div
            class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
          >
            <label
              class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
              for="inspector-text-control-11"
            >
              Search for items
            </label>
            <input
              class="components-text-control__input"
              id="inspector-text-control-11"
              type="search"
              value=""
            />
          </div>
        </div>
      </div>
      <ul
        class="woocommerce-search-list__list"
      >
        <li>
          <div
            class="woocommerce-search-list__item depth-0 has-children"
            role="treeitem"
            tabindex="0"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="inspector-checkbox-control-54"
                    type="checkbox"
                    value="1"
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-54"
                >
                  Apricots
                </label>
              </div>
            </div>
          </div>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-11-5"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-11-5"
                    name="search-list-item-11"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-55"
                >
                  Lychee
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-11-6"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-11-6"
                    name="search-list-item-11"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-56"
                >
                  Mulberry
                </label>
              </div>
            </div>
          </label>
        </li>
      </ul>
    </div>
  </div>,
  "debug": [Function],
  "findAllByAltText": [Function],
  "findAllByDisplayValue": [Function],
  "findAllByLabelText": [Function],
  "findAllByPlaceholderText": [Function],
  "findAllByRole": [Function],
  "findAllByTestId": [Function],
  "findAllByText": [Function],
  "findAllByTitle": [Function],
  "findByAltText": [Function],
  "findByDisplayValue": [Function],
  "findByLabelText": [Function],
  "findByPlaceholderText": [Function],
  "findByRole": [Function],
  "findByTestId": [Function],
  "findByText": [Function],
  "findByTitle": [Function],
  "getAllByAltText": [Function],
  "getAllByDisplayValue": [Function],
  "getAllByLabelText": [Function],
  "getAllByPlaceholderText": [Function],
  "getAllByRole": [Function],
  "getAllByTestId": [Function],
  "getAllByText": [Function],
  "getAllByTitle": [Function],
  "getByAltText": [Function],
  "getByDisplayValue": [Function],
  "getByLabelText": [Function],
  "getByPlaceholderText": [Function],
  "getByRole": [Function],
  "getByTestId": [Function],
  "getByText": [Function],
  "getByTitle": [Function],
  "queryAllByAltText": [Function],
  "queryAllByDisplayValue": [Function],
  "queryAllByLabelText": [Function],
  "queryAllByPlaceholderText": [Function],
  "queryAllByRole": [Function],
  "queryAllByTestId": [Function],
  "queryAllByText": [Function],
  "queryAllByTitle": [Function],
  "queryByAltText": [Function],
  "queryByDisplayValue": [Function],
  "queryByLabelText": [Function],
  "queryByPlaceholderText": [Function],
  "queryByRole": [Function],
  "queryByTestId": [Function],
  "queryByText": [Function],
  "queryByTitle": [Function],
  "rerender": [Function],
  "unmount": [Function],
}
`;

exports[`SearchListControl should render a search box and list of options 1`] = `
Object {
  "asFragment": [Function],
  "baseElement": <body>
    <p
      class="a11y-speak-intro-text"
      hidden="hidden"
      id="a11y-speak-intro-text"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    >
      Notifications
    </p>
    <div
      aria-atomic="true"
      aria-live="assertive"
      aria-relevant="additions text"
      class="a11y-speak-region"
      id="a11y-speak-assertive"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    />
    <div
      aria-atomic="true"
      aria-live="polite"
      aria-relevant="additions text"
      class="a11y-speak-region"
      id="a11y-speak-polite"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    />
    <div>
      <div
        class="woocommerce-search-list"
      >
        <div
          class="woocommerce-search-list__selected"
        >
          <div
            class="woocommerce-search-list__selected-header"
          >
            <strong>
              0 items selected
            </strong>
          </div>
        </div>
        <div
          class="woocommerce-search-list__search"
        >
          <div
            class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
          >
            <div
              class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
            >
              <label
                class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
                for="inspector-text-control-0"
              >
                Search for items
              </label>
              <input
                class="components-text-control__input"
                id="inspector-text-control-0"
                type="search"
                value=""
              />
            </div>
          </div>
        </div>
        <ul
          class="woocommerce-search-list__list"
        >
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-0-1"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-0-1"
                      name="search-list-item-0"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-0"
                  >
                    Apricots
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-0-2"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-0-2"
                      name="search-list-item-0"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-1"
                  >
                    Clementine
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-0-3"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-0-3"
                      name="search-list-item-0"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-2"
                  >
                    Elderberry
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-0-4"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-0-4"
                      name="search-list-item-0"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-3"
                  >
                    Guava
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-0-5"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-0-5"
                      name="search-list-item-0"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-4"
                  >
                    Lychee
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-0-6"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-0-6"
                      name="search-list-item-0"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-5"
                  >
                    Mulberry
                  </label>
                </div>
              </div>
            </label>
          </li>
        </ul>
      </div>
    </div>
  </body>,
  "container": <div>
    <div
      class="woocommerce-search-list"
    >
      <div
        class="woocommerce-search-list__selected"
      >
        <div
          class="woocommerce-search-list__selected-header"
        >
          <strong>
            0 items selected
          </strong>
        </div>
      </div>
      <div
        class="woocommerce-search-list__search"
      >
        <div
          class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
        >
          <div
            class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
          >
            <label
              class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
              for="inspector-text-control-0"
            >
              Search for items
            </label>
            <input
              class="components-text-control__input"
              id="inspector-text-control-0"
              type="search"
              value=""
            />
          </div>
        </div>
      </div>
      <ul
        class="woocommerce-search-list__list"
      >
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-0-1"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-0-1"
                    name="search-list-item-0"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-0"
                >
                  Apricots
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-0-2"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-0-2"
                    name="search-list-item-0"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-1"
                >
                  Clementine
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-0-3"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-0-3"
                    name="search-list-item-0"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-2"
                >
                  Elderberry
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-0-4"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-0-4"
                    name="search-list-item-0"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-3"
                >
                  Guava
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-0-5"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-0-5"
                    name="search-list-item-0"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-4"
                >
                  Lychee
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-0-6"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-0-6"
                    name="search-list-item-0"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-5"
                >
                  Mulberry
                </label>
              </div>
            </div>
          </label>
        </li>
      </ul>
    </div>
  </div>,
  "debug": [Function],
  "findAllByAltText": [Function],
  "findAllByDisplayValue": [Function],
  "findAllByLabelText": [Function],
  "findAllByPlaceholderText": [Function],
  "findAllByRole": [Function],
  "findAllByTestId": [Function],
  "findAllByText": [Function],
  "findAllByTitle": [Function],
  "findByAltText": [Function],
  "findByDisplayValue": [Function],
  "findByLabelText": [Function],
  "findByPlaceholderText": [Function],
  "findByRole": [Function],
  "findByTestId": [Function],
  "findByText": [Function],
  "findByTitle": [Function],
  "getAllByAltText": [Function],
  "getAllByDisplayValue": [Function],
  "getAllByLabelText": [Function],
  "getAllByPlaceholderText": [Function],
  "getAllByRole": [Function],
  "getAllByTestId": [Function],
  "getAllByText": [Function],
  "getAllByTitle": [Function],
  "getByAltText": [Function],
  "getByDisplayValue": [Function],
  "getByLabelText": [Function],
  "getByPlaceholderText": [Function],
  "getByRole": [Function],
  "getByTestId": [Function],
  "getByText": [Function],
  "getByTitle": [Function],
  "queryAllByAltText": [Function],
  "queryAllByDisplayValue": [Function],
  "queryAllByLabelText": [Function],
  "queryAllByPlaceholderText": [Function],
  "queryAllByRole": [Function],
  "queryAllByTestId": [Function],
  "queryAllByText": [Function],
  "queryAllByTitle": [Function],
  "queryByAltText": [Function],
  "queryByDisplayValue": [Function],
  "queryByLabelText": [Function],
  "queryByPlaceholderText": [Function],
  "queryByRole": [Function],
  "queryByTestId": [Function],
  "queryByText": [Function],
  "queryByTitle": [Function],
  "rerender": [Function],
  "unmount": [Function],
}
`;

exports[`SearchListControl should render a search box and list of options with a custom className 1`] = `
Object {
  "asFragment": [Function],
  "baseElement": <body>
    <p
      class="a11y-speak-intro-text"
      hidden="hidden"
      id="a11y-speak-intro-text"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    >
      Notifications
    </p>
    <div
      aria-atomic="true"
      aria-live="assertive"
      aria-relevant="additions text"
      class="a11y-speak-region"
      id="a11y-speak-assertive"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    />
    <div
      aria-atomic="true"
      aria-live="polite"
      aria-relevant="additions text"
      class="a11y-speak-region"
      id="a11y-speak-polite"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    />
    <div>
      <div
        class="woocommerce-search-list test-search"
      >
        <div
          class="woocommerce-search-list__selected"
        >
          <div
            class="woocommerce-search-list__selected-header"
          >
            <strong>
              0 items selected
            </strong>
          </div>
        </div>
        <div
          class="woocommerce-search-list__search"
        >
          <div
            class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
          >
            <div
              class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
            >
              <label
                class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
                for="inspector-text-control-1"
              >
                Search for items
              </label>
              <input
                class="components-text-control__input"
                id="inspector-text-control-1"
                type="search"
                value=""
              />
            </div>
          </div>
        </div>
        <ul
          class="woocommerce-search-list__list"
        >
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-1-1"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-1-1"
                      name="search-list-item-1"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-6"
                  >
                    Apricots
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-1-2"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-1-2"
                      name="search-list-item-1"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-7"
                  >
                    Clementine
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-1-3"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-1-3"
                      name="search-list-item-1"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-8"
                  >
                    Elderberry
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-1-4"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-1-4"
                      name="search-list-item-1"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-9"
                  >
                    Guava
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-1-5"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-1-5"
                      name="search-list-item-1"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-10"
                  >
                    Lychee
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-1-6"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-1-6"
                      name="search-list-item-1"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-11"
                  >
                    Mulberry
                  </label>
                </div>
              </div>
            </label>
          </li>
        </ul>
      </div>
    </div>
  </body>,
  "container": <div>
    <div
      class="woocommerce-search-list test-search"
    >
      <div
        class="woocommerce-search-list__selected"
      >
        <div
          class="woocommerce-search-list__selected-header"
        >
          <strong>
            0 items selected
          </strong>
        </div>
      </div>
      <div
        class="woocommerce-search-list__search"
      >
        <div
          class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
        >
          <div
            class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
          >
            <label
              class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
              for="inspector-text-control-1"
            >
              Search for items
            </label>
            <input
              class="components-text-control__input"
              id="inspector-text-control-1"
              type="search"
              value=""
            />
          </div>
        </div>
      </div>
      <ul
        class="woocommerce-search-list__list"
      >
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-1-1"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-1-1"
                    name="search-list-item-1"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-6"
                >
                  Apricots
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-1-2"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-1-2"
                    name="search-list-item-1"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-7"
                >
                  Clementine
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-1-3"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-1-3"
                    name="search-list-item-1"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-8"
                >
                  Elderberry
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-1-4"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-1-4"
                    name="search-list-item-1"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-9"
                >
                  Guava
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-1-5"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-1-5"
                    name="search-list-item-1"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-10"
                >
                  Lychee
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-1-6"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-1-6"
                    name="search-list-item-1"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-11"
                >
                  Mulberry
                </label>
              </div>
            </div>
          </label>
        </li>
      </ul>
    </div>
  </div>,
  "debug": [Function],
  "findAllByAltText": [Function],
  "findAllByDisplayValue": [Function],
  "findAllByLabelText": [Function],
  "findAllByPlaceholderText": [Function],
  "findAllByRole": [Function],
  "findAllByTestId": [Function],
  "findAllByText": [Function],
  "findAllByTitle": [Function],
  "findByAltText": [Function],
  "findByDisplayValue": [Function],
  "findByLabelText": [Function],
  "findByPlaceholderText": [Function],
  "findByRole": [Function],
  "findByTestId": [Function],
  "findByText": [Function],
  "findByTitle": [Function],
  "getAllByAltText": [Function],
  "getAllByDisplayValue": [Function],
  "getAllByLabelText": [Function],
  "getAllByPlaceholderText": [Function],
  "getAllByRole": [Function],
  "getAllByTestId": [Function],
  "getAllByText": [Function],
  "getAllByTitle": [Function],
  "getByAltText": [Function],
  "getByDisplayValue": [Function],
  "getByLabelText": [Function],
  "getByPlaceholderText": [Function],
  "getByRole": [Function],
  "getByTestId": [Function],
  "getByText": [Function],
  "getByTitle": [Function],
  "queryAllByAltText": [Function],
  "queryAllByDisplayValue": [Function],
  "queryAllByLabelText": [Function],
  "queryAllByPlaceholderText": [Function],
  "queryAllByRole": [Function],
  "queryAllByTestId": [Function],
  "queryAllByText": [Function],
  "queryAllByTitle": [Function],
  "queryByAltText": [Function],
  "queryByDisplayValue": [Function],
  "queryByLabelText": [Function],
  "queryByPlaceholderText": [Function],
  "queryByRole": [Function],
  "queryByTestId": [Function],
  "queryByText": [Function],
  "queryByTitle": [Function],
  "rerender": [Function],
  "unmount": [Function],
}
`;

exports[`SearchListControl should render a search box and list of options, with a custom render callback for each item 1`] = `
Object {
  "asFragment": [Function],
  "baseElement": <body>
    <p
      class="a11y-speak-intro-text"
      hidden="hidden"
      id="a11y-speak-intro-text"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    >
      Notifications
    </p>
    <div
      aria-atomic="true"
      aria-live="assertive"
      aria-relevant="additions text"
      class="a11y-speak-region"
      id="a11y-speak-assertive"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    />
    <div
      aria-atomic="true"
      aria-live="polite"
      aria-relevant="additions text"
      class="a11y-speak-region"
      id="a11y-speak-polite"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    />
    <div>
      <div
        class="woocommerce-search-list"
      >
        <div
          class="woocommerce-search-list__selected"
        >
          <div
            class="woocommerce-search-list__selected-header"
          >
            <strong>
              0 items selected
            </strong>
          </div>
        </div>
        <div
          class="woocommerce-search-list__search"
        >
          <div
            class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
          >
            <div
              class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
            >
              <label
                class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
                for="inspector-text-control-10"
              >
                Search for items
              </label>
              <input
                class="components-text-control__input"
                id="inspector-text-control-10"
                type="search"
                value=""
              />
            </div>
          </div>
        </div>
        <ul
          class="woocommerce-search-list__list"
        >
          <li>
            <div>
              Apricots
              !
            </div>
          </li>
          <li>
            <div>
              Clementine
              !
            </div>
          </li>
          <li>
            <div>
              Elderberry
              !
            </div>
          </li>
          <li>
            <div>
              Guava
              !
            </div>
          </li>
          <li>
            <div>
              Lychee
              !
            </div>
          </li>
          <li>
            <div>
              Mulberry
              !
            </div>
          </li>
        </ul>
      </div>
    </div>
  </body>,
  "container": <div>
    <div
      class="woocommerce-search-list"
    >
      <div
        class="woocommerce-search-list__selected"
      >
        <div
          class="woocommerce-search-list__selected-header"
        >
          <strong>
            0 items selected
          </strong>
        </div>
      </div>
      <div
        class="woocommerce-search-list__search"
      >
        <div
          class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
        >
          <div
            class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
          >
            <label
              class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
              for="inspector-text-control-10"
            >
              Search for items
            </label>
            <input
              class="components-text-control__input"
              id="inspector-text-control-10"
              type="search"
              value=""
            />
          </div>
        </div>
      </div>
      <ul
        class="woocommerce-search-list__list"
      >
        <li>
          <div>
            Apricots
            !
          </div>
        </li>
        <li>
          <div>
            Clementine
            !
          </div>
        </li>
        <li>
          <div>
            Elderberry
            !
          </div>
        </li>
        <li>
          <div>
            Guava
            !
          </div>
        </li>
        <li>
          <div>
            Lychee
            !
          </div>
        </li>
        <li>
          <div>
            Mulberry
            !
          </div>
        </li>
      </ul>
    </div>
  </div>,
  "debug": [Function],
  "findAllByAltText": [Function],
  "findAllByDisplayValue": [Function],
  "findAllByLabelText": [Function],
  "findAllByPlaceholderText": [Function],
  "findAllByRole": [Function],
  "findAllByTestId": [Function],
  "findAllByText": [Function],
  "findAllByTitle": [Function],
  "findByAltText": [Function],
  "findByDisplayValue": [Function],
  "findByLabelText": [Function],
  "findByPlaceholderText": [Function],
  "findByRole": [Function],
  "findByTestId": [Function],
  "findByText": [Function],
  "findByTitle": [Function],
  "getAllByAltText": [Function],
  "getAllByDisplayValue": [Function],
  "getAllByLabelText": [Function],
  "getAllByPlaceholderText": [Function],
  "getAllByRole": [Function],
  "getAllByTestId": [Function],
  "getAllByText": [Function],
  "getAllByTitle": [Function],
  "getByAltText": [Function],
  "getByDisplayValue": [Function],
  "getByLabelText": [Function],
  "getByPlaceholderText": [Function],
  "getByRole": [Function],
  "getByTestId": [Function],
  "getByText": [Function],
  "getByTitle": [Function],
  "queryAllByAltText": [Function],
  "queryAllByDisplayValue": [Function],
  "queryAllByLabelText": [Function],
  "queryAllByPlaceholderText": [Function],
  "queryAllByRole": [Function],
  "queryAllByTestId": [Function],
  "queryAllByText": [Function],
  "queryAllByTitle": [Function],
  "queryByAltText": [Function],
  "queryByDisplayValue": [Function],
  "queryByLabelText": [Function],
  "queryByPlaceholderText": [Function],
  "queryByRole": [Function],
  "queryByTestId": [Function],
  "queryByText": [Function],
  "queryByTitle": [Function],
  "rerender": [Function],
  "unmount": [Function],
}
`;

exports[`SearchListControl should render a search box and list of options, with a custom search input message 1`] = `
Object {
  "asFragment": [Function],
  "baseElement": <body>
    <p
      class="a11y-speak-intro-text"
      hidden="hidden"
      id="a11y-speak-intro-text"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    >
      Notifications
    </p>
    <div
      aria-atomic="true"
      aria-live="assertive"
      aria-relevant="additions text"
      class="a11y-speak-region"
      id="a11y-speak-assertive"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    />
    <div
      aria-atomic="true"
      aria-live="polite"
      aria-relevant="additions text"
      class="a11y-speak-region"
      id="a11y-speak-polite"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    />
    <div>
      <div
        class="woocommerce-search-list"
      >
        <div
          class="woocommerce-search-list__selected"
        >
          <div
            class="woocommerce-search-list__selected-header"
          >
            <strong>
              0 items selected
            </strong>
          </div>
        </div>
        <div
          class="woocommerce-search-list__search"
        >
          <div
            class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
          >
            <div
              class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
            >
              <label
                class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
                for="inspector-text-control-9"
              >
                Testing search label
              </label>
              <input
                class="components-text-control__input"
                id="inspector-text-control-9"
                type="search"
                value=""
              />
            </div>
          </div>
        </div>
        <ul
          class="woocommerce-search-list__list"
        >
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-9-1"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-9-1"
                      name="search-list-item-9"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-48"
                  >
                    Apricots
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-9-2"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-9-2"
                      name="search-list-item-9"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-49"
                  >
                    Clementine
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-9-3"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-9-3"
                      name="search-list-item-9"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-50"
                  >
                    Elderberry
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-9-4"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-9-4"
                      name="search-list-item-9"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-51"
                  >
                    Guava
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-9-5"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-9-5"
                      name="search-list-item-9"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-52"
                  >
                    Lychee
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-9-6"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-9-6"
                      name="search-list-item-9"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-53"
                  >
                    Mulberry
                  </label>
                </div>
              </div>
            </label>
          </li>
        </ul>
      </div>
    </div>
  </body>,
  "container": <div>
    <div
      class="woocommerce-search-list"
    >
      <div
        class="woocommerce-search-list__selected"
      >
        <div
          class="woocommerce-search-list__selected-header"
        >
          <strong>
            0 items selected
          </strong>
        </div>
      </div>
      <div
        class="woocommerce-search-list__search"
      >
        <div
          class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
        >
          <div
            class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
          >
            <label
              class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
              for="inspector-text-control-9"
            >
              Testing search label
            </label>
            <input
              class="components-text-control__input"
              id="inspector-text-control-9"
              type="search"
              value=""
            />
          </div>
        </div>
      </div>
      <ul
        class="woocommerce-search-list__list"
      >
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-9-1"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-9-1"
                    name="search-list-item-9"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-48"
                >
                  Apricots
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-9-2"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-9-2"
                    name="search-list-item-9"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-49"
                >
                  Clementine
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-9-3"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-9-3"
                    name="search-list-item-9"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-50"
                >
                  Elderberry
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-9-4"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-9-4"
                    name="search-list-item-9"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-51"
                >
                  Guava
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-9-5"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-9-5"
                    name="search-list-item-9"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-52"
                >
                  Lychee
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-9-6"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-9-6"
                    name="search-list-item-9"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-53"
                >
                  Mulberry
                </label>
              </div>
            </div>
          </label>
        </li>
      </ul>
    </div>
  </div>,
  "debug": [Function],
  "findAllByAltText": [Function],
  "findAllByDisplayValue": [Function],
  "findAllByLabelText": [Function],
  "findAllByPlaceholderText": [Function],
  "findAllByRole": [Function],
  "findAllByTestId": [Function],
  "findAllByText": [Function],
  "findAllByTitle": [Function],
  "findByAltText": [Function],
  "findByDisplayValue": [Function],
  "findByLabelText": [Function],
  "findByPlaceholderText": [Function],
  "findByRole": [Function],
  "findByTestId": [Function],
  "findByText": [Function],
  "findByTitle": [Function],
  "getAllByAltText": [Function],
  "getAllByDisplayValue": [Function],
  "getAllByLabelText": [Function],
  "getAllByPlaceholderText": [Function],
  "getAllByRole": [Function],
  "getAllByTestId": [Function],
  "getAllByText": [Function],
  "getAllByTitle": [Function],
  "getByAltText": [Function],
  "getByDisplayValue": [Function],
  "getByLabelText": [Function],
  "getByPlaceholderText": [Function],
  "getByRole": [Function],
  "getByTestId": [Function],
  "getByText": [Function],
  "getByTitle": [Function],
  "queryAllByAltText": [Function],
  "queryAllByDisplayValue": [Function],
  "queryAllByLabelText": [Function],
  "queryAllByPlaceholderText": [Function],
  "queryAllByRole": [Function],
  "queryAllByTestId": [Function],
  "queryAllByText": [Function],
  "queryAllByTitle": [Function],
  "queryByAltText": [Function],
  "queryByDisplayValue": [Function],
  "queryByLabelText": [Function],
  "queryByPlaceholderText": [Function],
  "queryByRole": [Function],
  "queryByTestId": [Function],
  "queryByText": [Function],
  "queryByTitle": [Function],
  "rerender": [Function],
  "unmount": [Function],
}
`;

exports[`SearchListControl should render a search box and no options 1`] = `
Object {
  "asFragment": [Function],
  "baseElement": <body>
    <p
      class="a11y-speak-intro-text"
      hidden="hidden"
      id="a11y-speak-intro-text"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    >
      Notifications
    </p>
    <div
      aria-atomic="true"
      aria-live="assertive"
      aria-relevant="additions text"
      class="a11y-speak-region"
      id="a11y-speak-assertive"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    />
    <div
      aria-atomic="true"
      aria-live="polite"
      aria-relevant="additions text"
      class="a11y-speak-region"
      id="a11y-speak-polite"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    />
    <div>
      <div
        class="woocommerce-search-list"
      >
        <div
          class="woocommerce-search-list__selected"
        >
          <div
            class="woocommerce-search-list__selected-header"
          >
            <strong>
              0 items selected
            </strong>
          </div>
        </div>
        <div
          class="woocommerce-search-list__search"
        >
          <div
            class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
          >
            <div
              class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
            >
              <label
                class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
                for="inspector-text-control-4"
              >
                Search for items
              </label>
              <input
                class="components-text-control__input"
                id="inspector-text-control-4"
                type="search"
                value=""
              />
            </div>
          </div>
        </div>
        <div
          class="woocommerce-search-list__list is-not-found"
        >
          <span
            class="woocommerce-search-list__not-found-icon"
          >
            <svg
              aria-hidden="true"
              focusable="false"
              height="24"
              role="img"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M12 3.2c-4.8 0-8.8 3.9-8.8 8.8 0 4.8 3.9 8.8 8.8 8.8 4.8 0 8.8-3.9 8.8-8.8 0-4.8-4-8.8-8.8-8.8zm0 16c-4 0-7.2-3.3-7.2-7.2C4.8 8 8 4.8 12 4.8s7.2 3.3 7.2 7.2c0 4-3.2 7.2-7.2 7.2zM11 17h2v-6h-2v6zm0-8h2V7h-2v2z"
              />
            </svg>
          </span>
          <span
            class="woocommerce-search-list__not-found-text"
          >
            No items found.
          </span>
        </div>
      </div>
    </div>
  </body>,
  "container": <div>
    <div
      class="woocommerce-search-list"
    >
      <div
        class="woocommerce-search-list__selected"
      >
        <div
          class="woocommerce-search-list__selected-header"
        >
          <strong>
            0 items selected
          </strong>
        </div>
      </div>
      <div
        class="woocommerce-search-list__search"
      >
        <div
          class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
        >
          <div
            class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
          >
            <label
              class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
              for="inspector-text-control-4"
            >
              Search for items
            </label>
            <input
              class="components-text-control__input"
              id="inspector-text-control-4"
              type="search"
              value=""
            />
          </div>
        </div>
      </div>
      <div
        class="woocommerce-search-list__list is-not-found"
      >
        <span
          class="woocommerce-search-list__not-found-icon"
        >
          <svg
            aria-hidden="true"
            focusable="false"
            height="24"
            role="img"
            viewBox="0 0 24 24"
            width="24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M12 3.2c-4.8 0-8.8 3.9-8.8 8.8 0 4.8 3.9 8.8 8.8 8.8 4.8 0 8.8-3.9 8.8-8.8 0-4.8-4-8.8-8.8-8.8zm0 16c-4 0-7.2-3.3-7.2-7.2C4.8 8 8 4.8 12 4.8s7.2 3.3 7.2 7.2c0 4-3.2 7.2-7.2 7.2zM11 17h2v-6h-2v6zm0-8h2V7h-2v2z"
            />
          </svg>
        </span>
        <span
          class="woocommerce-search-list__not-found-text"
        >
          No items found.
        </span>
      </div>
    </div>
  </div>,
  "debug": [Function],
  "findAllByAltText": [Function],
  "findAllByDisplayValue": [Function],
  "findAllByLabelText": [Function],
  "findAllByPlaceholderText": [Function],
  "findAllByRole": [Function],
  "findAllByTestId": [Function],
  "findAllByText": [Function],
  "findAllByTitle": [Function],
  "findByAltText": [Function],
  "findByDisplayValue": [Function],
  "findByLabelText": [Function],
  "findByPlaceholderText": [Function],
  "findByRole": [Function],
  "findByTestId": [Function],
  "findByText": [Function],
  "findByTitle": [Function],
  "getAllByAltText": [Function],
  "getAllByDisplayValue": [Function],
  "getAllByLabelText": [Function],
  "getAllByPlaceholderText": [Function],
  "getAllByRole": [Function],
  "getAllByTestId": [Function],
  "getAllByText": [Function],
  "getAllByTitle": [Function],
  "getByAltText": [Function],
  "getByDisplayValue": [Function],
  "getByLabelText": [Function],
  "getByPlaceholderText": [Function],
  "getByRole": [Function],
  "getByTestId": [Function],
  "getByText": [Function],
  "getByTitle": [Function],
  "queryAllByAltText": [Function],
  "queryAllByDisplayValue": [Function],
  "queryAllByLabelText": [Function],
  "queryAllByPlaceholderText": [Function],
  "queryAllByRole": [Function],
  "queryAllByTestId": [Function],
  "queryAllByText": [Function],
  "queryAllByTitle": [Function],
  "queryByAltText": [Function],
  "queryByDisplayValue": [Function],
  "queryByLabelText": [Function],
  "queryByPlaceholderText": [Function],
  "queryByRole": [Function],
  "queryByTestId": [Function],
  "queryByText": [Function],
  "queryByTitle": [Function],
  "rerender": [Function],
  "unmount": [Function],
}
`;

exports[`SearchListControl should render a search box with a search term, and no matching options 1`] = `
Object {
  "asFragment": [Function],
  "baseElement": <body>
    <p
      class="a11y-speak-intro-text"
      hidden="hidden"
      id="a11y-speak-intro-text"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    >
      Notifications
    </p>
    <div
      aria-atomic="true"
      aria-live="assertive"
      aria-relevant="additions text"
      class="a11y-speak-region"
      id="a11y-speak-assertive"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    />
    <div
      aria-atomic="true"
      aria-live="polite"
      aria-relevant="additions text"
      class="a11y-speak-region"
      id="a11y-speak-polite"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    />
    <div>
      <div
        class="woocommerce-search-list"
      >
        <div
          class="woocommerce-search-list__selected"
        >
          <div
            class="woocommerce-search-list__selected-header"
          >
            <strong>
              0 items selected
            </strong>
          </div>
        </div>
        <div
          class="woocommerce-search-list__search"
        >
          <div
            class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
          >
            <div
              class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
            >
              <label
                class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
                for="inspector-text-control-8"
              >
                Search for items
              </label>
              <input
                class="components-text-control__input"
                id="inspector-text-control-8"
                type="search"
                value=""
              />
            </div>
          </div>
        </div>
        <ul
          class="woocommerce-search-list__list"
        >
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-8-1"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-8-1"
                      name="search-list-item-8"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-42"
                  >
                    Apricots
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-8-2"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-8-2"
                      name="search-list-item-8"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-43"
                  >
                    Clementine
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-8-3"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-8-3"
                      name="search-list-item-8"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-44"
                  >
                    Elderberry
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-8-4"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-8-4"
                      name="search-list-item-8"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-45"
                  >
                    Guava
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-8-5"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-8-5"
                      name="search-list-item-8"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-46"
                  >
                    Lychee
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-8-6"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-8-6"
                      name="search-list-item-8"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-47"
                  >
                    Mulberry
                  </label>
                </div>
              </div>
            </label>
          </li>
        </ul>
      </div>
    </div>
  </body>,
  "container": <div>
    <div
      class="woocommerce-search-list"
    >
      <div
        class="woocommerce-search-list__selected"
      >
        <div
          class="woocommerce-search-list__selected-header"
        >
          <strong>
            0 items selected
          </strong>
        </div>
      </div>
      <div
        class="woocommerce-search-list__search"
      >
        <div
          class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
        >
          <div
            class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
          >
            <label
              class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
              for="inspector-text-control-8"
            >
              Search for items
            </label>
            <input
              class="components-text-control__input"
              id="inspector-text-control-8"
              type="search"
              value=""
            />
          </div>
        </div>
      </div>
      <ul
        class="woocommerce-search-list__list"
      >
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-8-1"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-8-1"
                    name="search-list-item-8"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-42"
                >
                  Apricots
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-8-2"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-8-2"
                    name="search-list-item-8"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-43"
                >
                  Clementine
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-8-3"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-8-3"
                    name="search-list-item-8"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-44"
                >
                  Elderberry
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-8-4"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-8-4"
                    name="search-list-item-8"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-45"
                >
                  Guava
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-8-5"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-8-5"
                    name="search-list-item-8"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-46"
                >
                  Lychee
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-8-6"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-8-6"
                    name="search-list-item-8"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-47"
                >
                  Mulberry
                </label>
              </div>
            </div>
          </label>
        </li>
      </ul>
    </div>
  </div>,
  "debug": [Function],
  "findAllByAltText": [Function],
  "findAllByDisplayValue": [Function],
  "findAllByLabelText": [Function],
  "findAllByPlaceholderText": [Function],
  "findAllByRole": [Function],
  "findAllByTestId": [Function],
  "findAllByText": [Function],
  "findAllByTitle": [Function],
  "findByAltText": [Function],
  "findByDisplayValue": [Function],
  "findByLabelText": [Function],
  "findByPlaceholderText": [Function],
  "findByRole": [Function],
  "findByTestId": [Function],
  "findByText": [Function],
  "findByTitle": [Function],
  "getAllByAltText": [Function],
  "getAllByDisplayValue": [Function],
  "getAllByLabelText": [Function],
  "getAllByPlaceholderText": [Function],
  "getAllByRole": [Function],
  "getAllByTestId": [Function],
  "getAllByText": [Function],
  "getAllByTitle": [Function],
  "getByAltText": [Function],
  "getByDisplayValue": [Function],
  "getByLabelText": [Function],
  "getByPlaceholderText": [Function],
  "getByRole": [Function],
  "getByTestId": [Function],
  "getByText": [Function],
  "getByTitle": [Function],
  "queryAllByAltText": [Function],
  "queryAllByDisplayValue": [Function],
  "queryAllByLabelText": [Function],
  "queryAllByPlaceholderText": [Function],
  "queryAllByRole": [Function],
  "queryAllByTestId": [Function],
  "queryAllByText": [Function],
  "queryAllByTitle": [Function],
  "queryByAltText": [Function],
  "queryByDisplayValue": [Function],
  "queryByLabelText": [Function],
  "queryByPlaceholderText": [Function],
  "queryByRole": [Function],
  "queryByTestId": [Function],
  "queryByText": [Function],
  "queryByTitle": [Function],
  "rerender": [Function],
  "unmount": [Function],
}
`;

exports[`SearchListControl should render a search box with a search term, and only matching options 1`] = `
Object {
  "asFragment": [Function],
  "baseElement": <body>
    <p
      class="a11y-speak-intro-text"
      hidden="hidden"
      id="a11y-speak-intro-text"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    >
      Notifications
    </p>
    <div
      aria-atomic="true"
      aria-live="assertive"
      aria-relevant="additions text"
      class="a11y-speak-region"
      id="a11y-speak-assertive"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    />
    <div
      aria-atomic="true"
      aria-live="polite"
      aria-relevant="additions text"
      class="a11y-speak-region"
      id="a11y-speak-polite"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    />
    <div>
      <div
        class="woocommerce-search-list"
      >
        <div
          class="woocommerce-search-list__selected"
        >
          <div
            class="woocommerce-search-list__selected-header"
          >
            <strong>
              0 items selected
            </strong>
          </div>
        </div>
        <div
          class="woocommerce-search-list__search"
        >
          <div
            class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
          >
            <div
              class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
            >
              <label
                class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
                for="inspector-text-control-5"
              >
                Search for items
              </label>
              <input
                class="components-text-control__input"
                id="inspector-text-control-5"
                type="search"
                value=""
              />
            </div>
          </div>
        </div>
        <ul
          class="woocommerce-search-list__list"
        >
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-5-1"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-5-1"
                      name="search-list-item-5"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-24"
                  >
                    Apricots
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-5-2"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-5-2"
                      name="search-list-item-5"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-25"
                  >
                    Clementine
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-5-3"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-5-3"
                      name="search-list-item-5"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-26"
                  >
                    Elderberry
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-5-4"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-5-4"
                      name="search-list-item-5"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-27"
                  >
                    Guava
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-5-5"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-5-5"
                      name="search-list-item-5"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-28"
                  >
                    Lychee
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-5-6"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-5-6"
                      name="search-list-item-5"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-29"
                  >
                    Mulberry
                  </label>
                </div>
              </div>
            </label>
          </li>
        </ul>
      </div>
    </div>
  </body>,
  "container": <div>
    <div
      class="woocommerce-search-list"
    >
      <div
        class="woocommerce-search-list__selected"
      >
        <div
          class="woocommerce-search-list__selected-header"
        >
          <strong>
            0 items selected
          </strong>
        </div>
      </div>
      <div
        class="woocommerce-search-list__search"
      >
        <div
          class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
        >
          <div
            class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
          >
            <label
              class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
              for="inspector-text-control-5"
            >
              Search for items
            </label>
            <input
              class="components-text-control__input"
              id="inspector-text-control-5"
              type="search"
              value=""
            />
          </div>
        </div>
      </div>
      <ul
        class="woocommerce-search-list__list"
      >
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-5-1"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-5-1"
                    name="search-list-item-5"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-24"
                >
                  Apricots
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-5-2"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-5-2"
                    name="search-list-item-5"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-25"
                >
                  Clementine
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-5-3"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-5-3"
                    name="search-list-item-5"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-26"
                >
                  Elderberry
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-5-4"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-5-4"
                    name="search-list-item-5"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-27"
                >
                  Guava
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-5-5"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-5-5"
                    name="search-list-item-5"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-28"
                >
                  Lychee
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-5-6"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-5-6"
                    name="search-list-item-5"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-29"
                >
                  Mulberry
                </label>
              </div>
            </div>
          </label>
        </li>
      </ul>
    </div>
  </div>,
  "debug": [Function],
  "findAllByAltText": [Function],
  "findAllByDisplayValue": [Function],
  "findAllByLabelText": [Function],
  "findAllByPlaceholderText": [Function],
  "findAllByRole": [Function],
  "findAllByTestId": [Function],
  "findAllByText": [Function],
  "findAllByTitle": [Function],
  "findByAltText": [Function],
  "findByDisplayValue": [Function],
  "findByLabelText": [Function],
  "findByPlaceholderText": [Function],
  "findByRole": [Function],
  "findByTestId": [Function],
  "findByText": [Function],
  "findByTitle": [Function],
  "getAllByAltText": [Function],
  "getAllByDisplayValue": [Function],
  "getAllByLabelText": [Function],
  "getAllByPlaceholderText": [Function],
  "getAllByRole": [Function],
  "getAllByTestId": [Function],
  "getAllByText": [Function],
  "getAllByTitle": [Function],
  "getByAltText": [Function],
  "getByDisplayValue": [Function],
  "getByLabelText": [Function],
  "getByPlaceholderText": [Function],
  "getByRole": [Function],
  "getByTestId": [Function],
  "getByText": [Function],
  "getByTitle": [Function],
  "queryAllByAltText": [Function],
  "queryAllByDisplayValue": [Function],
  "queryAllByLabelText": [Function],
  "queryAllByPlaceholderText": [Function],
  "queryAllByRole": [Function],
  "queryAllByTestId": [Function],
  "queryAllByText": [Function],
  "queryAllByTitle": [Function],
  "queryByAltText": [Function],
  "queryByDisplayValue": [Function],
  "queryByLabelText": [Function],
  "queryByPlaceholderText": [Function],
  "queryByRole": [Function],
  "queryByTestId": [Function],
  "queryByText": [Function],
  "queryByTitle": [Function],
  "rerender": [Function],
  "unmount": [Function],
}
`;

exports[`SearchListControl should render a search box with a search term, and only matching options, regardless of case sensitivity 1`] = `
Object {
  "asFragment": [Function],
  "baseElement": <body>
    <p
      class="a11y-speak-intro-text"
      hidden="hidden"
      id="a11y-speak-intro-text"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    >
      Notifications
    </p>
    <div
      aria-atomic="true"
      aria-live="assertive"
      aria-relevant="additions text"
      class="a11y-speak-region"
      id="a11y-speak-assertive"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    />
    <div
      aria-atomic="true"
      aria-live="polite"
      aria-relevant="additions text"
      class="a11y-speak-region"
      id="a11y-speak-polite"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    />
    <div>
      <div
        class="woocommerce-search-list"
      >
        <div
          class="woocommerce-search-list__selected"
        >
          <div
            class="woocommerce-search-list__selected-header"
          >
            <strong>
              0 items selected
            </strong>
          </div>
        </div>
        <div
          class="woocommerce-search-list__search"
        >
          <div
            class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
          >
            <div
              class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
            >
              <label
                class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
                for="inspector-text-control-6"
              >
                Search for items
              </label>
              <input
                class="components-text-control__input"
                id="inspector-text-control-6"
                type="search"
                value="BeRrY"
              />
            </div>
          </div>
        </div>
        <ul
          class="woocommerce-search-list__list"
        >
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-6-3"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-6-3"
                      name="search-list-item-6"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-32"
                  >
                    Elder
                    <strong>
                      berry
                    </strong>
                    
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-6-6"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-6-6"
                      name="search-list-item-6"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-35"
                  >
                    Mul
                    <strong>
                      berry
                    </strong>
                    
                  </label>
                </div>
              </div>
            </label>
          </li>
        </ul>
      </div>
    </div>
  </body>,
  "container": <div>
    <div
      class="woocommerce-search-list"
    >
      <div
        class="woocommerce-search-list__selected"
      >
        <div
          class="woocommerce-search-list__selected-header"
        >
          <strong>
            0 items selected
          </strong>
        </div>
      </div>
      <div
        class="woocommerce-search-list__search"
      >
        <div
          class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
        >
          <div
            class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
          >
            <label
              class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
              for="inspector-text-control-6"
            >
              Search for items
            </label>
            <input
              class="components-text-control__input"
              id="inspector-text-control-6"
              type="search"
              value="BeRrY"
            />
          </div>
        </div>
      </div>
      <ul
        class="woocommerce-search-list__list"
      >
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-6-3"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-6-3"
                    name="search-list-item-6"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-32"
                >
                  Elder
                  <strong>
                    berry
                  </strong>
                  
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-6-6"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-6-6"
                    name="search-list-item-6"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-35"
                >
                  Mul
                  <strong>
                    berry
                  </strong>
                  
                </label>
              </div>
            </div>
          </label>
        </li>
      </ul>
    </div>
  </div>,
  "debug": [Function],
  "findAllByAltText": [Function],
  "findAllByDisplayValue": [Function],
  "findAllByLabelText": [Function],
  "findAllByPlaceholderText": [Function],
  "findAllByRole": [Function],
  "findAllByTestId": [Function],
  "findAllByText": [Function],
  "findAllByTitle": [Function],
  "findByAltText": [Function],
  "findByDisplayValue": [Function],
  "findByLabelText": [Function],
  "findByPlaceholderText": [Function],
  "findByRole": [Function],
  "findByTestId": [Function],
  "findByText": [Function],
  "findByTitle": [Function],
  "getAllByAltText": [Function],
  "getAllByDisplayValue": [Function],
  "getAllByLabelText": [Function],
  "getAllByPlaceholderText": [Function],
  "getAllByRole": [Function],
  "getAllByTestId": [Function],
  "getAllByText": [Function],
  "getAllByTitle": [Function],
  "getByAltText": [Function],
  "getByDisplayValue": [Function],
  "getByLabelText": [Function],
  "getByPlaceholderText": [Function],
  "getByRole": [Function],
  "getByTestId": [Function],
  "getByText": [Function],
  "getByTitle": [Function],
  "queryAllByAltText": [Function],
  "queryAllByDisplayValue": [Function],
  "queryAllByLabelText": [Function],
  "queryAllByPlaceholderText": [Function],
  "queryAllByRole": [Function],
  "queryAllByTestId": [Function],
  "queryAllByText": [Function],
  "queryAllByTitle": [Function],
  "queryByAltText": [Function],
  "queryByDisplayValue": [Function],
  "queryByLabelText": [Function],
  "queryByPlaceholderText": [Function],
  "queryByRole": [Function],
  "queryByTestId": [Function],
  "queryByText": [Function],
  "queryByTitle": [Function],
  "rerender": [Function],
  "unmount": [Function],
}
`;

exports[`SearchListControl should render a search box, a list of options, and 1 selected item 1`] = `
Object {
  "asFragment": [Function],
  "baseElement": <body>
    <p
      class="a11y-speak-intro-text"
      hidden="hidden"
      id="a11y-speak-intro-text"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    >
      Notifications
    </p>
    <div
      aria-atomic="true"
      aria-live="assertive"
      aria-relevant="additions text"
      class="a11y-speak-region"
      id="a11y-speak-assertive"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    />
    <div
      aria-atomic="true"
      aria-live="polite"
      aria-relevant="additions text"
      class="a11y-speak-region"
      id="a11y-speak-polite"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    />
    <div>
      <div
        class="woocommerce-search-list"
      >
        <div
          class="woocommerce-search-list__selected"
        >
          <div
            class="woocommerce-search-list__selected-header"
          >
            <strong>
              1 item selected
            </strong>
            <button
              aria-label="Clear all selected items"
              class="components-button is-link is-destructive"
              type="button"
            >
              Clear all
            </button>
          </div>
          <ul>
            <li>
              <span
                class="woocommerce-tag has-remove"
              >
                <span
                  class="woocommerce-tag__text"
                  id="woocommerce-tag__label-0"
                >
                  <span
                    class="screen-reader-text"
                  >
                    Clementine
                  </span>
                  <span
                    aria-hidden="true"
                  >
                    Clementine
                  </span>
                </span>
                <button
                  aria-describedby="woocommerce-tag__label-0"
                  aria-label="Remove Clementine"
                  class="components-button woocommerce-tag__remove"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="clear-icon"
                    focusable="false"
                    height="20"
                    role="img"
                    viewBox="0 0 24 24"
                    width="20"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM15.5303 8.46967C15.8232 8.76256 15.8232 9.23744 15.5303 9.53033L13.0607 12L15.5303 14.4697C15.8232 14.7626 15.8232 15.2374 15.5303 15.5303C15.2374 15.8232 14.7626 15.8232 14.4697 15.5303L12 13.0607L9.53033 15.5303C9.23744 15.8232 8.76256 15.8232 8.46967 15.5303C8.17678 15.2374 8.17678 14.7626 8.46967 14.4697L10.9393 12L8.46967 9.53033C8.17678 9.23744 8.17678 8.76256 8.46967 8.46967C8.76256 8.17678 9.23744 8.17678 9.53033 8.46967L12 10.9393L14.4697 8.46967C14.7626 8.17678 15.2374 8.17678 15.5303 8.46967Z"
                    />
                  </svg>
                </button>
              </span>
            </li>
          </ul>
        </div>
        <div
          class="woocommerce-search-list__search"
        >
          <div
            class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
          >
            <div
              class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
            >
              <label
                class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
                for="inspector-text-control-2"
              >
                Search for items
              </label>
              <input
                class="components-text-control__input"
                id="inspector-text-control-2"
                type="search"
                value=""
              />
            </div>
          </div>
        </div>
        <ul
          class="woocommerce-search-list__list"
        >
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-2-1"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-2-1"
                      name="search-list-item-2"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-12"
                  >
                    Apricots
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-2-2"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      checked=""
                      class="components-checkbox-control__input"
                      id="search-list-item-2-2"
                      name="search-list-item-2"
                      type="checkbox"
                      value=""
                    />
                    <svg
                      aria-hidden="true"
                      class="components-checkbox-control__checked"
                      focusable="false"
                      height="24"
                      role="img"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
                      />
                    </svg>
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-13"
                  >
                    Clementine
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-2-3"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-2-3"
                      name="search-list-item-2"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-14"
                  >
                    Elderberry
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-2-4"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-2-4"
                      name="search-list-item-2"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-15"
                  >
                    Guava
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-2-5"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-2-5"
                      name="search-list-item-2"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-16"
                  >
                    Lychee
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-2-6"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-2-6"
                      name="search-list-item-2"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-17"
                  >
                    Mulberry
                  </label>
                </div>
              </div>
            </label>
          </li>
        </ul>
      </div>
    </div>
  </body>,
  "container": <div>
    <div
      class="woocommerce-search-list"
    >
      <div
        class="woocommerce-search-list__selected"
      >
        <div
          class="woocommerce-search-list__selected-header"
        >
          <strong>
            1 item selected
          </strong>
          <button
            aria-label="Clear all selected items"
            class="components-button is-link is-destructive"
            type="button"
          >
            Clear all
          </button>
        </div>
        <ul>
          <li>
            <span
              class="woocommerce-tag has-remove"
            >
              <span
                class="woocommerce-tag__text"
                id="woocommerce-tag__label-0"
              >
                <span
                  class="screen-reader-text"
                >
                  Clementine
                </span>
                <span
                  aria-hidden="true"
                >
                  Clementine
                </span>
              </span>
              <button
                aria-describedby="woocommerce-tag__label-0"
                aria-label="Remove Clementine"
                class="components-button woocommerce-tag__remove"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="clear-icon"
                  focusable="false"
                  height="20"
                  role="img"
                  viewBox="0 0 24 24"
                  width="20"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM15.5303 8.46967C15.8232 8.76256 15.8232 9.23744 15.5303 9.53033L13.0607 12L15.5303 14.4697C15.8232 14.7626 15.8232 15.2374 15.5303 15.5303C15.2374 15.8232 14.7626 15.8232 14.4697 15.5303L12 13.0607L9.53033 15.5303C9.23744 15.8232 8.76256 15.8232 8.46967 15.5303C8.17678 15.2374 8.17678 14.7626 8.46967 14.4697L10.9393 12L8.46967 9.53033C8.17678 9.23744 8.17678 8.76256 8.46967 8.46967C8.76256 8.17678 9.23744 8.17678 9.53033 8.46967L12 10.9393L14.4697 8.46967C14.7626 8.17678 15.2374 8.17678 15.5303 8.46967Z"
                  />
                </svg>
              </button>
            </span>
          </li>
        </ul>
      </div>
      <div
        class="woocommerce-search-list__search"
      >
        <div
          class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
        >
          <div
            class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
          >
            <label
              class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
              for="inspector-text-control-2"
            >
              Search for items
            </label>
            <input
              class="components-text-control__input"
              id="inspector-text-control-2"
              type="search"
              value=""
            />
          </div>
        </div>
      </div>
      <ul
        class="woocommerce-search-list__list"
      >
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-2-1"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-2-1"
                    name="search-list-item-2"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-12"
                >
                  Apricots
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-2-2"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    checked=""
                    class="components-checkbox-control__input"
                    id="search-list-item-2-2"
                    name="search-list-item-2"
                    type="checkbox"
                    value=""
                  />
                  <svg
                    aria-hidden="true"
                    class="components-checkbox-control__checked"
                    focusable="false"
                    height="24"
                    role="img"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
                    />
                  </svg>
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-13"
                >
                  Clementine
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-2-3"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-2-3"
                    name="search-list-item-2"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-14"
                >
                  Elderberry
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-2-4"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-2-4"
                    name="search-list-item-2"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-15"
                >
                  Guava
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-2-5"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-2-5"
                    name="search-list-item-2"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-16"
                >
                  Lychee
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-2-6"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-2-6"
                    name="search-list-item-2"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-17"
                >
                  Mulberry
                </label>
              </div>
            </div>
          </label>
        </li>
      </ul>
    </div>
  </div>,
  "debug": [Function],
  "findAllByAltText": [Function],
  "findAllByDisplayValue": [Function],
  "findAllByLabelText": [Function],
  "findAllByPlaceholderText": [Function],
  "findAllByRole": [Function],
  "findAllByTestId": [Function],
  "findAllByText": [Function],
  "findAllByTitle": [Function],
  "findByAltText": [Function],
  "findByDisplayValue": [Function],
  "findByLabelText": [Function],
  "findByPlaceholderText": [Function],
  "findByRole": [Function],
  "findByTestId": [Function],
  "findByText": [Function],
  "findByTitle": [Function],
  "getAllByAltText": [Function],
  "getAllByDisplayValue": [Function],
  "getAllByLabelText": [Function],
  "getAllByPlaceholderText": [Function],
  "getAllByRole": [Function],
  "getAllByTestId": [Function],
  "getAllByText": [Function],
  "getAllByTitle": [Function],
  "getByAltText": [Function],
  "getByDisplayValue": [Function],
  "getByLabelText": [Function],
  "getByPlaceholderText": [Function],
  "getByRole": [Function],
  "getByTestId": [Function],
  "getByText": [Function],
  "getByTitle": [Function],
  "queryAllByAltText": [Function],
  "queryAllByDisplayValue": [Function],
  "queryAllByLabelText": [Function],
  "queryAllByPlaceholderText": [Function],
  "queryAllByRole": [Function],
  "queryAllByTestId": [Function],
  "queryAllByText": [Function],
  "queryAllByTitle": [Function],
  "queryByAltText": [Function],
  "queryByDisplayValue": [Function],
  "queryByLabelText": [Function],
  "queryByPlaceholderText": [Function],
  "queryByRole": [Function],
  "queryByTestId": [Function],
  "queryByText": [Function],
  "queryByTitle": [Function],
  "rerender": [Function],
  "unmount": [Function],
}
`;

exports[`SearchListControl should render a search box, a list of options, and 2 selected item 1`] = `
Object {
  "asFragment": [Function],
  "baseElement": <body>
    <p
      class="a11y-speak-intro-text"
      hidden="hidden"
      id="a11y-speak-intro-text"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    >
      Notifications
    </p>
    <div
      aria-atomic="true"
      aria-live="assertive"
      aria-relevant="additions text"
      class="a11y-speak-region"
      id="a11y-speak-assertive"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    />
    <div
      aria-atomic="true"
      aria-live="polite"
      aria-relevant="additions text"
      class="a11y-speak-region"
      id="a11y-speak-polite"
      style="position: absolute;margin: -1px;padding: 0;height: 1px;width: 1px;overflow: hidden;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%);border: 0;word-wrap: normal !important;"
    />
    <div>
      <div
        class="woocommerce-search-list"
      >
        <div
          class="woocommerce-search-list__selected"
        >
          <div
            class="woocommerce-search-list__selected-header"
          >
            <strong>
              2 items selected
            </strong>
            <button
              aria-label="Clear all selected items"
              class="components-button is-link is-destructive"
              type="button"
            >
              Clear all
            </button>
          </div>
          <ul>
            <li>
              <span
                class="woocommerce-tag has-remove"
              >
                <span
                  class="woocommerce-tag__text"
                  id="woocommerce-tag__label-1"
                >
                  <span
                    class="screen-reader-text"
                  >
                    Clementine
                  </span>
                  <span
                    aria-hidden="true"
                  >
                    Clementine
                  </span>
                </span>
                <button
                  aria-describedby="woocommerce-tag__label-1"
                  aria-label="Remove Clementine"
                  class="components-button woocommerce-tag__remove"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="clear-icon"
                    focusable="false"
                    height="20"
                    role="img"
                    viewBox="0 0 24 24"
                    width="20"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM15.5303 8.46967C15.8232 8.76256 15.8232 9.23744 15.5303 9.53033L13.0607 12L15.5303 14.4697C15.8232 14.7626 15.8232 15.2374 15.5303 15.5303C15.2374 15.8232 14.7626 15.8232 14.4697 15.5303L12 13.0607L9.53033 15.5303C9.23744 15.8232 8.76256 15.8232 8.46967 15.5303C8.17678 15.2374 8.17678 14.7626 8.46967 14.4697L10.9393 12L8.46967 9.53033C8.17678 9.23744 8.17678 8.76256 8.46967 8.46967C8.76256 8.17678 9.23744 8.17678 9.53033 8.46967L12 10.9393L14.4697 8.46967C14.7626 8.17678 15.2374 8.17678 15.5303 8.46967Z"
                    />
                  </svg>
                </button>
              </span>
            </li>
            <li>
              <span
                class="woocommerce-tag has-remove"
              >
                <span
                  class="woocommerce-tag__text"
                  id="woocommerce-tag__label-2"
                >
                  <span
                    class="screen-reader-text"
                  >
                    Guava
                  </span>
                  <span
                    aria-hidden="true"
                  >
                    Guava
                  </span>
                </span>
                <button
                  aria-describedby="woocommerce-tag__label-2"
                  aria-label="Remove Guava"
                  class="components-button woocommerce-tag__remove"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="clear-icon"
                    focusable="false"
                    height="20"
                    role="img"
                    viewBox="0 0 24 24"
                    width="20"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM15.5303 8.46967C15.8232 8.76256 15.8232 9.23744 15.5303 9.53033L13.0607 12L15.5303 14.4697C15.8232 14.7626 15.8232 15.2374 15.5303 15.5303C15.2374 15.8232 14.7626 15.8232 14.4697 15.5303L12 13.0607L9.53033 15.5303C9.23744 15.8232 8.76256 15.8232 8.46967 15.5303C8.17678 15.2374 8.17678 14.7626 8.46967 14.4697L10.9393 12L8.46967 9.53033C8.17678 9.23744 8.17678 8.76256 8.46967 8.46967C8.76256 8.17678 9.23744 8.17678 9.53033 8.46967L12 10.9393L14.4697 8.46967C14.7626 8.17678 15.2374 8.17678 15.5303 8.46967Z"
                    />
                  </svg>
                </button>
              </span>
            </li>
          </ul>
        </div>
        <div
          class="woocommerce-search-list__search"
        >
          <div
            class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
          >
            <div
              class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
            >
              <label
                class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
                for="inspector-text-control-3"
              >
                Search for items
              </label>
              <input
                class="components-text-control__input"
                id="inspector-text-control-3"
                type="search"
                value=""
              />
            </div>
          </div>
        </div>
        <ul
          class="woocommerce-search-list__list"
        >
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-3-1"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-3-1"
                      name="search-list-item-3"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-18"
                  >
                    Apricots
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-3-2"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      checked=""
                      class="components-checkbox-control__input"
                      id="search-list-item-3-2"
                      name="search-list-item-3"
                      type="checkbox"
                      value=""
                    />
                    <svg
                      aria-hidden="true"
                      class="components-checkbox-control__checked"
                      focusable="false"
                      height="24"
                      role="img"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
                      />
                    </svg>
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-19"
                  >
                    Clementine
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-3-3"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-3-3"
                      name="search-list-item-3"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-20"
                  >
                    Elderberry
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-3-4"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      checked=""
                      class="components-checkbox-control__input"
                      id="search-list-item-3-4"
                      name="search-list-item-3"
                      type="checkbox"
                      value=""
                    />
                    <svg
                      aria-hidden="true"
                      class="components-checkbox-control__checked"
                      focusable="false"
                      height="24"
                      role="img"
                      viewBox="0 0 24 24"
                      width="24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
                      />
                    </svg>
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-21"
                  >
                    Guava
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-3-5"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-3-5"
                      name="search-list-item-3"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-22"
                  >
                    Lychee
                  </label>
                </div>
              </div>
            </label>
          </li>
          <li>
            <label
              class="woocommerce-search-list__item depth-0"
              for="search-list-item-3-6"
            >
              <div
                class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
              >
                <div
                  class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
                >
                  <span
                    class="components-checkbox-control__input-container"
                  >
                    <input
                      class="components-checkbox-control__input"
                      id="search-list-item-3-6"
                      name="search-list-item-3"
                      type="checkbox"
                      value=""
                    />
                  </span>
                  <label
                    class="components-checkbox-control__label"
                    for="inspector-checkbox-control-23"
                  >
                    Mulberry
                  </label>
                </div>
              </div>
            </label>
          </li>
        </ul>
      </div>
    </div>
  </body>,
  "container": <div>
    <div
      class="woocommerce-search-list"
    >
      <div
        class="woocommerce-search-list__selected"
      >
        <div
          class="woocommerce-search-list__selected-header"
        >
          <strong>
            2 items selected
          </strong>
          <button
            aria-label="Clear all selected items"
            class="components-button is-link is-destructive"
            type="button"
          >
            Clear all
          </button>
        </div>
        <ul>
          <li>
            <span
              class="woocommerce-tag has-remove"
            >
              <span
                class="woocommerce-tag__text"
                id="woocommerce-tag__label-1"
              >
                <span
                  class="screen-reader-text"
                >
                  Clementine
                </span>
                <span
                  aria-hidden="true"
                >
                  Clementine
                </span>
              </span>
              <button
                aria-describedby="woocommerce-tag__label-1"
                aria-label="Remove Clementine"
                class="components-button woocommerce-tag__remove"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="clear-icon"
                  focusable="false"
                  height="20"
                  role="img"
                  viewBox="0 0 24 24"
                  width="20"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM15.5303 8.46967C15.8232 8.76256 15.8232 9.23744 15.5303 9.53033L13.0607 12L15.5303 14.4697C15.8232 14.7626 15.8232 15.2374 15.5303 15.5303C15.2374 15.8232 14.7626 15.8232 14.4697 15.5303L12 13.0607L9.53033 15.5303C9.23744 15.8232 8.76256 15.8232 8.46967 15.5303C8.17678 15.2374 8.17678 14.7626 8.46967 14.4697L10.9393 12L8.46967 9.53033C8.17678 9.23744 8.17678 8.76256 8.46967 8.46967C8.76256 8.17678 9.23744 8.17678 9.53033 8.46967L12 10.9393L14.4697 8.46967C14.7626 8.17678 15.2374 8.17678 15.5303 8.46967Z"
                  />
                </svg>
              </button>
            </span>
          </li>
          <li>
            <span
              class="woocommerce-tag has-remove"
            >
              <span
                class="woocommerce-tag__text"
                id="woocommerce-tag__label-2"
              >
                <span
                  class="screen-reader-text"
                >
                  Guava
                </span>
                <span
                  aria-hidden="true"
                >
                  Guava
                </span>
              </span>
              <button
                aria-describedby="woocommerce-tag__label-2"
                aria-label="Remove Guava"
                class="components-button woocommerce-tag__remove"
                type="button"
              >
                <svg
                  aria-hidden="true"
                  class="clear-icon"
                  focusable="false"
                  height="20"
                  role="img"
                  viewBox="0 0 24 24"
                  width="20"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM15.5303 8.46967C15.8232 8.76256 15.8232 9.23744 15.5303 9.53033L13.0607 12L15.5303 14.4697C15.8232 14.7626 15.8232 15.2374 15.5303 15.5303C15.2374 15.8232 14.7626 15.8232 14.4697 15.5303L12 13.0607L9.53033 15.5303C9.23744 15.8232 8.76256 15.8232 8.46967 15.5303C8.17678 15.2374 8.17678 14.7626 8.46967 14.4697L10.9393 12L8.46967 9.53033C8.17678 9.23744 8.17678 8.76256 8.46967 8.46967C8.76256 8.17678 9.23744 8.17678 9.53033 8.46967L12 10.9393L14.4697 8.46967C14.7626 8.17678 15.2374 8.17678 15.5303 8.46967Z"
                  />
                </svg>
              </button>
            </span>
          </li>
        </ul>
      </div>
      <div
        class="woocommerce-search-list__search"
      >
        <div
          class="components-base-control css-wdf2ti-Wrapper e1puf3u3"
        >
          <div
            class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
          >
            <label
              class="components-base-control__label css-13ck15n-StyledLabel e1puf3u1"
              for="inspector-text-control-3"
            >
              Search for items
            </label>
            <input
              class="components-text-control__input"
              id="inspector-text-control-3"
              type="search"
              value=""
            />
          </div>
        </div>
      </div>
      <ul
        class="woocommerce-search-list__list"
      >
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-3-1"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-3-1"
                    name="search-list-item-3"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-18"
                >
                  Apricots
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-3-2"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    checked=""
                    class="components-checkbox-control__input"
                    id="search-list-item-3-2"
                    name="search-list-item-3"
                    type="checkbox"
                    value=""
                  />
                  <svg
                    aria-hidden="true"
                    class="components-checkbox-control__checked"
                    focusable="false"
                    height="24"
                    role="img"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
                    />
                  </svg>
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-19"
                >
                  Clementine
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-3-3"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-3-3"
                    name="search-list-item-3"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-20"
                >
                  Elderberry
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-3-4"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    checked=""
                    class="components-checkbox-control__input"
                    id="search-list-item-3-4"
                    name="search-list-item-3"
                    type="checkbox"
                    value=""
                  />
                  <svg
                    aria-hidden="true"
                    class="components-checkbox-control__checked"
                    focusable="false"
                    height="24"
                    role="img"
                    viewBox="0 0 24 24"
                    width="24"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
                    />
                  </svg>
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-21"
                >
                  Guava
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-3-5"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-3-5"
                    name="search-list-item-3"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-22"
                >
                  Lychee
                </label>
              </div>
            </div>
          </label>
        </li>
        <li>
          <label
            class="woocommerce-search-list__item depth-0"
            for="search-list-item-3-6"
          >
            <div
              class="components-base-control components-checkbox-control woocommerce-search-list__item-input css-wdf2ti-Wrapper e1puf3u3"
            >
              <div
                class="components-base-control__field css-igk9ll-StyledField e1puf3u2"
              >
                <span
                  class="components-checkbox-control__input-container"
                >
                  <input
                    class="components-checkbox-control__input"
                    id="search-list-item-3-6"
                    name="search-list-item-3"
                    type="checkbox"
                    value=""
                  />
                </span>
                <label
                  class="components-checkbox-control__label"
                  for="inspector-checkbox-control-23"
                >
                  Mulberry
                </label>
              </div>
            </div>
          </label>
        </li>
      </ul>
    </div>
  </div>,
  "debug": [Function],
  "findAllByAltText": [Function],
  "findAllByDisplayValue": [Function],
  "findAllByLabelText": [Function],
  "findAllByPlaceholderText": [Function],
  "findAllByRole": [Function],
  "findAllByTestId": [Function],
  "findAllByText": [Function],
  "findAllByTitle": [Function],
  "findByAltText": [Function],
  "findByDisplayValue": [Function],
  "findByLabelText": [Function],
  "findByPlaceholderText": [Function],
  "findByRole": [Function],
  "findByTestId": [Function],
  "findByText": [Function],
  "findByTitle": [Function],
  "getAllByAltText": [Function],
  "getAllByDisplayValue": [Function],
  "getAllByLabelText": [Function],
  "getAllByPlaceholderText": [Function],
  "getAllByRole": [Function],
  "getAllByTestId": [Function],
  "getAllByText": [Function],
  "getAllByTitle": [Function],
  "getByAltText": [Function],
  "getByDisplayValue": [Function],
  "getByLabelText": [Function],
  "getByPlaceholderText": [Function],
  "getByRole": [Function],
  "getByTestId": [Function],
  "getByText": [Function],
  "getByTitle": [Function],
  "queryAllByAltText": [Function],
  "queryAllByDisplayValue": [Function],
  "queryAllByLabelText": [Function],
  "queryAllByPlaceholderText": [Function],
  "queryAllByRole": [Function],
  "queryAllByTestId": [Function],
  "queryAllByText": [Function],
  "queryAllByTitle": [Function],
  "queryByAltText": [Function],
  "queryByDisplayValue": [Function],
  "queryByLabelText": [Function],
  "queryByPlaceholderText": [Function],
  "queryByRole": [Function],
  "queryByTestId": [Function],
  "queryByText": [Function],
  "queryByTitle": [Function],
  "rerender": [Function],
  "unmount": [Function],
}
`;
